<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import { dialog } from '@/settings/components/dialog';
import type { TableData } from '@arco-design/web-vue';
import { useDebounceFn } from '@vueuse/core';
import { type ResponseData, type FloatNavigationEdit, useLabelList, DEBOUNCED_TIME } from './use';

const listing = ref<TableData[]>([]);
const loading = ref(false);
const { success } = useNotification();
const { t } = useI18n();
const labelList = useLabelList();
const search = ref();

// 标签分页表格
const refresh = async () => {
  const { isSuccess, data } = await $fetch('/admin/suspend/list', {
    method: 'get',
    loadingStatus: loading,
  });

  const typedData: TableData[] = (data as ResponseData[]).map((item) => {
    return {
      ...item,
      name: labelList[item.contentCategory as keyof typeof labelList] || item.name,
      key: String(item.id),
    };
  });

  if (isSuccess) {
    listing.value = typedData;
  }
}

// 改变展示状态
const changeStatus = async (record: TableData) => {
  const { isSuccess } = await $fetch('/admin/suspend/update', {
    method: 'post',
    data: {
      content: record.content,
      contentType: record.contentType,
      displayStatus: record.displayStatus,
      id: record.id,
      link: record.link,
      name: record.name,
      pic: record.pic,
    } as FloatNavigationEdit,
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

const debouncedChangeStatus = useDebounceFn(changeStatus, DEBOUNCED_TIME);

// 打开弹窗编辑悬浮导航
const edit = async (record: TableData) => {
  const { button } = await dialog(() => import('./edit-window.vue'), {
    title: labelList[record.contentCategory as keyof typeof labelList] || record.name,
    props: {
      id: record.id,
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :data="listing" :loading="loading" @search="refresh" ref="search">
      <template #columns>
        <!-- nTODO: i18n 部分en未配置 -->
        <!-- <ATableColumn :title="$t('settings.view.floatNavigation.index.column1')">
          <template #cell="{ record }">
            <img :src="record.pic" class="size-24">
          </template>
        </ATableColumn> -->
        <ATableColumn :title="$t('settings.view.floatNavigation.index.column2')">
          <template #cell="{ record }">
            {{ labelList[record.contentCategory as keyof typeof labelList] || record.name }}
          </template>
        </ATableColumn>
        <ATableColumn :title="$t('settings.view.floatNavigation.index.column3')">
          <template #cell="{ record }">
            <OpenImage :src="record?.content" img-class="size-80 object-contain" v-if="record.contentType === 'image'" />
            <span v-else-if="record.contentType === 'text'">{{ record.content }}</span>
          </template>
        </ATableColumn>
        <ATableColumn :title="$t('settings.view.floatNavigation.index.column4')" data-index="link" />
        <ATableColumn :title="$t('settings.view.floatNavigation.index.column5')" :width="100">
          <template #cell="{ record }">
            <ASwitch v-model="record.displayStatus" size="small" :checked-value="1" :unchecked-value="0" @change="debouncedChangeStatus(record)" />
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.table.column.action')" :width="120">
          <template #cell="{ record }">
            <div class="button-actions">
              <AButton size="small" @click="edit(record)">{{ $t('settings.action.edit') }}</AButton>
            </div>
          </template>
        </ATableColumn>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
